<template>
  <div class="details">
    <!-- 面包屑 -->
    <div class="location-box">
      <div>
        您现在的位置：<span style="color: #222">穿越火线</span> >
        <span style="color: #222">全部商品</span> > 道具详情
      </div>
    </div>
    <!-- 内容区 -->
    <div class="mainer">
      <div class="sidebar">
        <!-- 最近浏览过的商品 -->
        <div class="sbcont">
          <h3>最近浏览器过的商品</h3>
          <ul class="viewbuy-box clearfix">
            <li>
              <a href="#" class="rank-link clearfix">
                <div class="djimg">
                  <img
                    src="https://game.gtimg.cn/images/cf/2010005501.jpg"
                    alt=""
                  />
                </div>
                <div class="djinfo fr">
                  <p class="djname">AK-47-A(30天)</p>
                  <p class="djprice">30 Q币</p>
                </div>
              </a>
            </li>
            <li>
              <a href="#" class="rank-link clearfix">
                <div class="djimg">
                  <img
                    src="https://game.gtimg.cn/images/cf/9000000101.jpg"
                    alt=""
                  />
                </div>
                <div class="djinfo fr">
                  <p class="djname">修改昵称</p>
                  <p class="djprice">15 Q币</p>
                </div>
              </a>
            </li>
          </ul>
          <a href="#" class="sidebar-tip">清除历史记录</a>
        </div>
      </div>
      <div class="maincont">
        <!-- 商品信息栏 -->
        <div class="goodsbox">
          <div class="clearfix">
            <div class="djinfobox clearfix">
              <div class="goods-img fl">
                <div class="goods-img-bg pr">
                  <img
                    style="width: 190px; height: 135px"
                    :src="goodsList[0].img"
                    alt=""
                  />
                  <div
                    id="btn_detail_jzoom_img"
                    href="#"
                    class="comico btn-goods-zoom pa"
                    title="查看大图"
                    @click="image"
                  >
                    查看大图
                  </div>
                  <li>
                    <a
                      id="btn_detail_weibo_collect"
                      href="#"
                      iseqid="3655"
                      sgoodsname="修改昵称"
                      url="3655.shtml"
                      piclink="http://ossweb-img.qq.com/images/cf/9000000101.jpg"
                      class="comico btn-goods-fav collect-btn"
                      title="收藏商品"
                      >收藏商品</a
                    >
                  </li>
                </div>
              </div>
              <div class="goodsbuy-box fl">
                <h2 class="goods-name clearfix">
                  <span class="fl name">{{ goodsList[0].title }}</span>
                  <div
                    class="comico goods-bg"
                    style="background-position: -5px -143px"
                  >
                    <dl>
                      <dt class="pt10" style="margin-top: 10px;">Q币价：</dt>
                      <dd class="txt-line pt10" style="margin-top: 10px;">
                        <span class="goods-price orange" style="font-size: 24px;">{{
                          goodsList[0].price
                        }}</span>
                        <span class="red unit">&nbsp;Q币</span>
                      </dd>
                    </dl>
                    <dl>
                      <dt class="fl" style="display: none">微信价：</dt>
                      <dd class="fl" style="display: none">
                        <span class="goods-price red">￥14.55</span>
                      </dd>
                    </dl>
                    <dl class="pt18">
                      <dt>使用期限：</dt>
                      <dd id="use_date" style="display: block"></dd>
                      <dd class="selected">
                        <a pos="59" href="#"
                          ><span class="sTime_btn" id="sTime_3655" seq="3655"
                            >{{ goodsList[0].count
                            }}{{
                              goodsList[0].unit ? goodsList[0].unit : ""
                            }}</span
                          >
                          <i>已选中</i></a
                        >
                      </dd>
                    </dl>
                    <span id="blk_detail_main_onsale" class="clearfix">
                      <a
                        id="btn_detail_main_addcart"
                        iseqid="3655"
                        class="fl btnico btn-goods-cart btn-com clearfix"
                        style="text-decoration: none"
                        title="加入购物车"
                        @click="oasn"
                        >加入购物车</a
                      >
                      <a
                        href="#"
                        id="btn_detail_main_grant"
                        iseqid="3655"
                        class="fl btnico btn-goods-handsel btn-blue"
                        style="text-decoration: none"
                        title="赠送"
                        >赠送</a
                      >
                    </span>
                  </div>
                </h2>
              </div>
            </div>
          </div>
          <div id="blk_detail_desc" class="goods-info-box clearfix">
            <div class="comico info-nav">
              <a href="#" class="focus" id="goods-nav-0">商品详情</a>

              <a href="#" class="mobile" id="">
                手机购买
                <!-- 二维码 -->
                <i @mouseenter="isimg = true" @mouseleave="isimg = false" class="comico i-code"></i>
                <div v-if="isimg" class="codeimg">
                  <img
                    src="//js01.daoju.qq.com/common/images/channel/revision/code-index.png"
                    width="166"
                    height="174"
                    alt="二维码"
                  />
                </div>
              </a>
            </div>
            <div class="goods_tab_0 clear">
              <p class="dj-detail">仅能作为穿越火线游戏内昵称修改使用</p>
            </div>
          </div>
        </div>
        <!-- 周边商城 -->
        <div class="zbmallbox mt20 clearfix" id="zblist" style="">
          <div class="titbox clearfix">
            <h3 class="current">周边商城</h3>
            <div class="morebox">
              <a
                title="更多"
                class="fr plate-more"
                id="tuijian_more"
                href="#"
                target="_blank"
                >更多&gt;</a
              >
            </div>
          </div>
          <div class="likecont">
            <!-- 周边商城 -->
            <ul
              id="blk_index_zb_list"
              class="likelist zblist"
              data-rendered="yes"
            >
              <li>
                <div class="likediv clearfix">
                  <a class="imglink" target="_blank" href="#">
                    <img
                      width="80"
                      height="80"
                      alt="致竞巅峰系列充电线 苹果接口"
                      src="https://game.gtimg.cn/images/zb/x5/uploadImg/goods/202104/20210421105956_62220.jpg"
                    />
                  </a>
                  <div class="likeinfo">
                    <p>
                      <a target="_blank" href="#"
                        ><em>致竞巅峰系列充电线 苹果接口</em></a
                      >
                    </p>
                    <p>商城价：<span class="red">￥60.00</span></p>
                  </div>
                </div>
              </li>
              <li>
                <div class="likediv clearfix">
                  <a class="imglink" target="_blank" href="#">
                    <img
                      width="80"
                      height="80"
                      alt="CF 葵 1/10正比例手办"
                      src="https://game.gtimg.cn/images/zb/x5/uploadImg/goods/202110/20211018160402_89686.jpg"
                    />
                  </a>
                  <div class="likeinfo">
                    <p>
                      <a target="_blank" href="#"
                        ><em>CF 葵 1/10正比例手办</em></a
                      >
                    </p>
                    <p>商城价：<span class="red">￥399.00</span></p>
                  </div>
                </div>
              </li>
              <li>
                <div class="likediv clearfix">
                  <a class="imglink" target="_blank" href="#">
                    <img
                      width="80"
                      height="80"
                      alt="汤姆逊-烈龙 英雄级手办模型 典藏版"
                      src="https://game.gtimg.cn/images/zb/x5/uploadImg/goods/202002/20200229232006_49807.jpg"
                    />
                  </a>
                  <div class="likeinfo">
                    <p>
                      <a target="_blank" href="#"
                        ><em>汤姆逊-烈龙 英雄级手办模型 典藏版</em></a
                      >
                    </p>
                    <p>商城价：<span class="red">￥498.00</span></p>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <!-- 精彩活动 -->
        <div
          class="detail-adlist mt20 clearfix"
          id="actbot"
          data-onload="initActbot"
          data-title="广告列表"
        >
          <div class="titbox clearfix">
            <h3 class="current">精彩活动</h3>
            <div class="morebox">
              <a title="更多" class="fr plate-more" id="tuijian_more" href="#"
                >更多&gt;</a
              >
            </div>
          </div>
          <ul class="act-list clearfix" id="blk_index_bottom_ad">
            <li data-infoid="916760">
              <div class="actbox">
                <a
                  class="linkfc"
                  href="#"
                  tcsstag="mall.cf_index_new.actclick.916760"
                >
                  <div class="actimg">
                    <div class="game-name">
                      <div class="namebg"></div>
                      <div class="name">穿越火线</div>
                    </div>
                    <div class="game-status">今日<br />刚上架</div>
                    <img
                      src="https://game.gtimg.cn/upload/webplat/info/dj/20220610/673481653632854.jpg"
                      width="305"
                      height="118"
                      alt="全新特殊光效COP，参与必得！"
                    />
                  </div>
                </a>
                <div class="tips">
                  <div class="fl game-tit">全新特殊光效COP，参与必得！</div>
                  <p class="time">活动时间：2022-06-11~2022-06-17</p>
                  <div class="attention">
                    <span data-infoid="916760" class="like">点赞</span>
                    <span><strong class="num">(3222)</strong></span>
                  </div>
                </div>
              </div>
            </li>
            <li data-infoid="916569">
              <div class="actbox">
                <a
                  class="linkfc"
                  href="#"
                  tcsstag="mall.cf_index_new.actclick.916569"
                >
                  <div class="actimg">
                    <div class="game-name">
                      <div class="namebg"></div>
                      <div class="name">穿越火线</div>
                    </div>
                    <div class="game-status">火爆<br />进行中</div>
                    <img
                      src="https://game.gtimg.cn/upload/webplat/info/dj/20220607/5647880672983.JPG"
                      width="305"
                      height="118"
                      alt="枪娘-机械丛林法则！"
                    />
                  </div>
                </a>
                <div class="tips">
                  <div class="fl game-tit">枪娘-机械丛林法则！</div>
                  <p class="time">活动时间：2022-06-07~2022-07-07</p>
                  <div class="attention">
                    <span data-infoid="916569" class="like">点赞</span>
                    <span><strong class="num">(3232)</strong></span>
                  </div>
                </div>
              </div>
            </li>
            <li data-infoid="916382">
              <div class="actbox">
                <a
                  class="linkfc"
                  href="#"
                  tcsstag="mall.cf_index_new.actclick.916382"
                >
                  <div class="actimg">
                    <div class="game-name">
                      <div class="namebg"></div>
                      <div class="name">穿越火线</div>
                    </div>
                    <div class="game-status">火爆<br />进行中</div>
                    <img
                      src="https://game.gtimg.cn/upload/webplat/info/dj/20220602/920151067366461.jpg"
                      width="305"
                      height="118"
                      alt="端午盛典，领全新珍藏！"
                    />
                  </div>
                </a>
                <div class="tips">
                  <div class="fl game-tit">端午盛典，领全新珍藏！</div>
                  <p class="time">活动时间：2022-06-02~2022-06-10</p>
                  <div class="attention">
                    <span data-infoid="916382" class="like">点赞</span>
                    <span><strong class="num">(3583)</strong></span>
                  </div>
                </div>
              </div>
            </li>
          </ul>
          <script type="tmpl/text" id="tmpl_index_bottom_ad">
            {if data && data.length > 0}
            {for item in data}
            <li data-infoid="${item.iInfoId}">
                <div class="actbox">
                    <a class="linkfc" href="/mall/actcenter_detail.shtml?biz=${item.biz}&id=${item.iInfoId}&typeid=${item.iTypeId}&ADTAG=innercop.cf.SY.activities_new" tcsstag="mall.cf_index_new.actclick.${item.iInfoId}">
                        <div class="actimg">
                            <div class="game-name">
                                <div class="namebg"></div>
                                <div class="name">${item.bizName}</div>
                            </div>
                            <div class="game-status">
                                {if item.isNew}
                                今日<br>刚上架
                                {else}
                                火爆<br>进行中
                                {/if}
                            </div>
                            <img src="{if item.sImageAddr}${item.sImageAddr.replace('https://ossweb-img.qq.com','https://game.gtimg.cn')}{else}${item.sImageAbbrAddr.replace('https://ossweb-img.qq.com','https://game.gtimg.cn')}{/if}" width="305" height="118" alt="${item.sTitle}">
                        </div>
                    </a>
                    <div class="tips">
                        <div class="fl game-tit">${item.sTitle}</div>
                        <p class="time">活动时间：${item.dtBegTime.split(' ')[0]}~${item.dtEndTime.split(' ')[0]}</p>
                        <div class="attention">
                            <span data-infoid="${item.iInfoId}" class="like {if item.iVoteStat == 0} likeclick {/if}">点赞</span>
                            <span><strong class="num">(${item.iAgreeNums})</strong></span>
                        </div>
                    </div>
                </div>
            </li>
            {/for}
            {/if}
          </script>
        </div>
      </div>
    </div>
    <!-- 放大镜 -->
    <transition>
    <div
      class="zoom"
      v-if="show"
      style="
        position: absolute;
        top: 146.5px;
        left: 253px;
        width: 860px;
        height: 532px;
        display: block;
      "
    >
      <table
        class="zoom_table"
        style="border-collapse: collapse; width: 100%; height: 100%"
      >
        <tbody>
          <tr>
            <td
              class="tl"
              style="
                background: url(//ossweb-img.qq.com/images/gameshop/ui/zoom_img/images//tl.png)
                  0 0 no-repeat;
                width: 20px;
                height: 20px;
                overflow: hidden;
              "
            ></td>
            <td
              class="tm"
              style="
                background: url(//ossweb-img.qq.com/images/gameshop/ui/zoom_img/images//tm.png)
                  0 0 repeat-x;
                height: 20px;
                overflow: hidden;
              "
            ></td>
            <td
              class="tr"
              style="

                width: 20px;
                height: 20px;
                overflow: hidden;
              "
            ></td>
          </tr>
          <tr>
            <td
              class="ml"
              style="
                background: url(//ossweb-img.qq.com/images/gameshop/ui/zoom_img/images//ml.png)
                  0 0 repeat-y;
                width: 20px;
                overflow: hidden;
              "
            ></td>
            <td
              class="mm"
              style="background: #fff; vertical-align: top; padding: 10px"
            >
              <div id="zoom_content">
                <img
                  :src="goodsList[0].img"
                  style="width: 100%"
                />
              </div>
            </td>
            <td class="mr" style="background:url(//ossweb-img.qq.com/images/gameshop/ui/zoom_img/images//mr.png) 100% 0 repeat-y;  width:20px; overflow:hidden;"></td>
          </tr>
          <tr>
            <td class="bl" style="background:url(//ossweb-img.qq.com/images/gameshop/ui/zoom_img/images//bl.png) 0 100% no-repeat; width:20px; height:20px; overflow:hidden;"></td>
            <td class="bm" style="background:url(//ossweb-img.qq.com/images/gameshop/ui/zoom_img/images//bm.png) 0 100% repeat-x; height:20px; overflow:hidden;"></td>
            <td class="br" style="background:url(//ossweb-img.qq.com/images/gameshop/ui/zoom_img/images//br.png) 100% 100% no-repeat; width:20px; height:20px; overflow:hidden;"></td>
          </tr>
        </tbody>
      </table>
      <a
        href="#"
        @click="show = false"
        class="zoom_close"
        style="
          position: absolute;
          top: 0px;
          right: 0px;
          width: 30px;
          height: 30px;
          display: block;
        "
      >
        <img
          src="//ossweb-img.qq.com/images/gameshop/ui/zoom_img/images//closebox.png"
          alt="Close"
          style="border: none; margin: 0; padding: 0"
        />
      </a>
    </div>
    </transition>
  </div>
</template>

<script>
import { reqDetails, queryAddShopping_cart } from '@/api/goods'
export default {
  name: 'details',
  data () {
    return {
      goodsList: {},
      show: false,
      isimg: false
    }
  },
  methods: {
    async getDetaList () {
      const res = await reqDetails(this.$route.query.id)
      // console.log(res);
      this.goodsList = res
    },
    async oasn () {
      await queryAddShopping_cart(this.$route.query.id)
      this.$store.dispatch('cart/getCartList')
      this.$message.success('添加成功')
    },
    image () {
      this.show = !this.show
    }
  },
  mounted () {
    this.getDetaList()
  }
}
</script>

<style lang="scss" scoped>
// 隐藏
.v-leave-to {
  opacity: 0;
}
// 隐藏中
.v-leave-active {
  transition: all .5s linear;
}
// 隐藏后
.v-leave-to {
  opacity: 0;
  transform: scale(0);
}

// 显示前
.v-enter {
  opacity: 0;
  transform: scale(0);
}
// 显示中
.v-enter-active {
  transition: all .5s linear;
}
// 显示后
.v-enter-to {
  opacity: 1;
  transform: scale(1);
}

.details {
  height: 1125px;
  background: #f3f4f6;
}
.location-box {
  margin: 0px auto 8px;
  width: 1190px;
  color: #606060;
  height: 18px;
  position: relative;
  zoom: 1;
  cursor: pointer;
  .fl {
    float: left;
    color: #606060;
    a {
      color: #3a3f4a;
      text-decoration: none;
      outline: none;
    }
  }
}
.sbcont .viewbuy-box li a .djimg {
  margin-left: 3px;
  width: 77px;
  height: 54px;
  float: left;
}
.sbcont .viewbuy-box li a .djimg img {
  display: block;
  width: 77px;
  height: 54px;
}
.sbcont .viewbuy-box li a .djinfo {
  width: 108px;
  overflow: hidden;
  color: #3a3f4a;
  float: right;
}
.sbcont .viewbuy-box li a .djname {
  width: 108px;
  font-size: 12px;
  font-weight: bold;
  height: 14px;
  line-height: 12px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.sbcont .viewbuy-box li a .djname:hover {
  color: #f74a4a;
  text-decoration: underline;
}
.sbcont .viewbuy-box li a .djprice {
  margin-top: 8px;
  height: 15px;
}
.sidebar-tip {
  display: block;
  text-align: center;
  margin: 0 40px;
  line-height: 13px;
  padding-bottom: 15px;
  color: #3a3f4a;
  text-decoration: none;
  outline: none;
}
.mainer {
  width: 1200px;
  height: 1075px;
  margin: 0 auto;
  .sidebar {
    width: 228px;
    height: 240px;
    float: left;
    margin-top: 10px;
    .sbcont {
      padding: 0 13px 0 0;
      background: #fff;
      height: 230px;
      h3 {
        margin-left: 18px;
        font-size: 16px;
        color: #555;
        font-weight: normal;
        height: 47px;
        border-bottom: 1px solid #f3f4f6;
        line-height: 54px;
        text-indent: 6px;
        position: relative;
      }
      .viewbuy-box {
        height: auto;
        margin-left: 20px;
        padding-bottom: 10px;
        li {
          min-height: 71px;
          height: auto;
          border-bottom: 1px dashed #e7e7e7;
          -webkit-transition: all 0.2s linear;
          transition: all 0.2s linear;
          a {
            display: block;
            width: 100%;
            padding-top: 15px;
            position: relative;
          }
        }
      }
    }
  }
  .maincont {
    width: 952px;
    height: 1075px;
    float: right;
    margin-right: 10px;
  }
  .goodsbox {
    background: #fafbfc;
    width: 952px;
    height: 515px;
    padding: 30px 0 14px;
    .clearfix {
      .djinfobox {
        margin-left: 58px;
        width: 710px;
        height: 360px;
        .goods-img {
          width: 190px;
          height: 165px;
          margin-top: 35px;
          float: left;
        }
        .goods-img-bg {
          width: 190px;
          height: 135px;
        }
        .comico {
          background: url(//js01.daoju.qq.com/mall/images/channelmall/cf/comico.png)
            no-repeat;
        }
        .btn-goods-zoom {
          width: 16px;
          height: 15px;
          margin: 2px 0;
          background-position: -5px -969px;
          right: -24px;
          bottom: -1px;
          text-indent: -9999em;
          overflow: hidden;
          cursor: pointer;
          float: right;
        }
        .btn-goods-fav {
          margin-top: 6px;
          height: 25px;
          display: block;
          line-height: 27px;
          width: auto;
          color: #9f9f9f;
          text-indent: 19px;
          background-color: transparent;
          text-decoration: none;
        }
        .btn-goods-fav {
          background-position: -5px -521px;
          width: 67px;
          margin: 4px 0px 0px 30px;
        }
        li {
          list-style: none;
        }
      }
    }
  }
  .goodsbuy-box {
    width: 456px;
    height: 222px;
    margin-left: 64px;
    float: right;
  }
  .goodsbuy-box .goods-name {
    font-size: 18px;
    text-indent: 15px;
    font-weight: bold;
    color: #2e2e2e;
    span {
      line-height: 30px;
      font-size: 18px;
    }
  }
}
.goods-bg {
  background: url(//js02.daoju.qq.com/common/images/channel/revision/cf/comico.png)
    no-repeat;
  background-position: -5px -143px;
  margin-top: 6px;
  width: 456px;
  height: 76px;
  background-position: -5px -143px;
  position: relative;
}
.comico {
  background: url(//js01.daoju.qq.com/mall/images/channelmall/cf/comico.png)
    no-repeat;
}
.goodsbuy-box dl {
  display: block;
  clear: both;
  height: 30px;
}
.goodsbuy-box dt,
.goodsbuy-box dd {
  float: left;
  line-height: 30px;
  display: block;
  font-size: 14px;
  color: #222;
  font-weight: 500;
  text-indent: 15px;
}
.goodsbuy-box dd[data-v-176476ca] {
  float: left;
  line-height: 30px;
  display: block;
  font-size: 14px;
  color: #222;
  font-weight: 500;
  text-indent: 0.5px;
}
.goodsbuy-box span {
  line-height: 30px;
  font: bold 24px Arial;
  margin-right: 3px;
}
.goodsbuy-box .unit {
  font-weight: bold;
  font-size: 18px;
}
.orange {
  color: #ff5900;
}
.red,
a.red {
  color: #f74a4a;
}
.pt18 {
  padding-top: 18px;
}
.goodsbuy-box dt,
.goodsbuy-box dd {
  float: left;
  line-height: 30px;
  display: block;
  font-size: 14px;
  color: #222;
}
.selected {
  margin-right: 6px;
  border: 1px solid #f74a4a;
  position: relative;
  min-width: 36px;
  height: 22px;
  text-align: center;
  cursor: pointer;
}
.goodsbuy-box dl a {
  color: #222;
  width: 65px;
  height: 22px;
  line-height: 23px;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
}
.goodsbuy-box dd.selected span {
  line-height: 22px;
}
.goodsbuy-box dd.selected span[data-v-176476ca] {
  line-height: 22px;
  font-size: 14px;
  font-weight: 500;
}
.selected i {
  background: url(//js02.daoju.qq.com/common/images/channel/sanjiao.png)
    no-repeat;
  bottom: 0;
  display: block;
  height: 12px;
  overflow: hidden;
  position: absolute;
  right: 0;
  text-indent: -9999em;
  width: 12px;
}
.goodsbuy-box span {
  line-height: 30px;
}
.btn-goods-buy,
.btn-goods-cart,
.btn-goods-handsel,
.btn-goods-dis,
.btn-goods-waiting,
a.btn-cart-dis,
a.btn-handsel-dis {
  margin: 10px 9px 0 15px;
  display: block;
  width: 142px;
  height: 42px;
  line-height: 42px;
  text-align: center;
  font-size: 18px;
  color: #fff;
  font-weight: 500px;
}
.btn-com {
  background: #ff5900;
  color: #fff;
  display: block;
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
  float: left;
  font-weight: 500;
}
.btn-blue {
  background: #259afe;
  color: #fff;
  display: block;
  float: right;
  position: absolute;
  margin: 10px 185px;
  font-weight: 500;
}
.goods-info-box {
  display: block;
  margin: 36px 20px 20px;
  background: #fafbfc;
  height: auto;
  border: 1px solid #ddd;
}
.goods-info-box .info-nav {
  margin: 17px 0 0 75px;
  display: block;
  height: 20px;
  width: 705px;
  background-position: -5px -229px;
  position: relative;
  background-color: #fff;
}
.goods-info-box .info-nav a.focus {
  position: absolute;
  z-index: 4;
  top: -11px;
  left: -75px;
  height: 20px;
  font-weight: bold;
  color: #222;
  font-size: 14px;
  text-decoration: none;
}
.goods-info-box .info-nav a {
  display: block;
  width: 75px;
  height: 20px;
  float: left;
  position: absolute;
  z-index: 40;
  line-height: 35px;
  text-align: center;
  color: #535353;
  font-size: 14px;
  font-weight: normal;
  background-color: #fff;
}
.goods_tab_0,
.goods_tab_1 {
  width: 84%;
  padding: 30px 8% 0;
  height: auto;
  font-size: 14px;
  line-height: 22px;
}
.goods-info-box .info-nav a.mobile {
  position: absolute;
  z-index: 4;
  top: -11px;
  right: -75px;
  height: 20px;
  color: #9f9f9f;
  text-decoration: none;
}

.goods-info-box .info-nav a .i-code {
  position: absolute;
  right: -45px;
  top: 4px;
  width: 45px;
  height: 28px;
  background-position: -5px -347px;
  display: block;
}
.mt20 {
  margin-top: 20px;
}
.zbmallbox li p em {
  margin-top: 5px;
  font-size: 14px;
  font-weight: bold;
  width: 170px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  height: 22px;
  color: #2e2e2e;
  display: block;
}
.zbmallbox {
  padding: 16px 10px 0;
  background: #fafbfc;
  height: auto;
  li {
    margin-right: 18px;
    float: left;
    display: inline;
    padding: 25px 6px;
    text-align: center;
    width: 279px;
    -webkit-transition: all 0.2s linear;
    transition: all 0.2s linear;
    p {
      text-align: left;
      margin-bottom: 5px;
      .red {
        font-size: 14px;
        font-weight: bold;
      }
    }
    img {
      display: block;
      width: 120px;
      height: 114px;
    }
  }
  .morebox {
    position: absolute;
    right: 18px;
    top: -14px;
    height: 50px;
    line-height: 50px;
    width: 366px;
    .plate-more {
      color: #1994eb;
      cursor: pointer;
      float: right;
    }
  }
  h3 {
    float: left;
    font-size: 16px;
    color: #616161;
    font-weight: normal;
    height: 26px;
    width: 75px;
    margin-right: 10px;
    cursor: pointer;
  }
}
.zbmallbox .titbox {
  font-weight: bold;
  height: 27px;
  border-bottom: 1px solid #f3f4f6;
  text-align: center;
  position: relative;
  .morebox .plate-more[data-v-176476ca] {
    color: #1994eb;
    cursor: pointer;
    float: right;
    text-decoration: none;
  }
  h3.current {
    color: #222;
    font-weight: bold;
    border-bottom: 1px solid #f74a4a;
  }
}
a {
  text-decoration: none;
  width: 134px;
  float: left;
  color: #666;
}
.likeinfo {
  float: right;
}
.detail-adlist {
  padding: 16px 2px 0 8px;
  background: #fafbfc;
  height: auto;
  z-index: 1;
  position: relative;
  h3 {
    float: left;
    font-size: 16px;
    color: #222;
    height: 26px;
    width: 75px;
    margin-right: 10px;
    .morebox {
      position: absolute;
      right: 18px;
      top: -14px;
      height: 50px;
      line-height: 50px;
      width: 366px;
    }
    cursor: pointer;
  }
  .titbox {
    margin: 0 5px;
    font-weight: bold;
    height: 27px;
    border-bottom: 1px solid #ddd;
    text-align: center;
    position: relative;
  }
}
.detail-adlist .morebox .plate-more {
  color: #1994eb;
  cursor: pointer;
  float: right;
  text-decoration: none;
}
.act-list {
  width: 940px;
  height: auto;
  margin: 0 auto;
  margin-top: 12px;
  *margin-bottom: 12px;
  position: relative;
  .actbox {
    position: relative;
    width: 305px;
    height: 190px;
    cursor: pointer;
    display: block;
  }
  .tips {
    position: relative;
    height: 187px;
    line-height: 25px;
    width: 303px;
    border: 1px solid #d7dde4;
    border-top: 0;
    .attention {
      position: absolute;
      bottom: 10px;
      right: 15px;
      width: auto;
      height: 25px;
      line-height: 25px;
      color: #fff;
      font-size: 14px;
      z-index: 6;
      span {
        display: block;
        float: left;
        color: #999;
      }
      .like {
        background: url(//js01.daoju.qq.com/common/images/channel/revision/lol/actico.png)
          no-repeat;
        background-position: 0 -168px;
        text-indent: -999em;
        width: 16px;
        height: 16px;
        margin: 3px 5px 0 15px;
        *margin-top: 1px;
      }
    }
    .time {
      float: left;
      margin-left: 15px;
    }
    .game-tit {
      margin-left: 15px;
      margin-top: 10px;
      color: #f74a4a;
      font-size: 14px;
      font-weight: bold;
      width: 285px;
      float: left;
    }
  }
  .actimg {
    position: relative;
    width: 305px;
    height: 118px;
    .game-status {
      position: absolute;
      right: 20px;
      top: 0;
      width: 48px;
      height: 53px;
      text-align: center;
      color: #fff;
      font-size: 14px;
      background: url(//js01.daoju.qq.com/common/images/channel/revision/lol/actico.png)
        no-repeat;
      background-position: 0 -33px;
      z-index: 5;
    }
    .game-name {
      position: absolute;
      top: 0;
      left: 0;
      height: 20px;
      width: 80px;
      font-size: 14px;
      color: #fff;
      text-align: center;
      .name {
        position: absolute;
        top: 0;
        left: 10px;
        z-index: 8;
        min-width: 80px;
        width: auto;
        white-space: nowrap;
        text-align: left;
      }
      .namebg {
        position: absolute;
        top: 0;
        left: -3px;
        height: 20px;
        width: 120px;
        background: url(//js01.daoju.qq.com/common/images/channel/revision/lol/actico.png)
          no-repeat;
        background-position: 0 -137px;
        opacity: 0.85;
        filter: alpha(opacity=85);
        -moz-opacity: 0.85;
      }
    }
  }
  .linkfc {
    width: 305px;
    height: 118px;
    display: block;
  }
  .actbox {
    position: relative;
    width: 305px;
    height: 190px;
    cursor: pointer;
    display: block;
  }
}
.detail-adlist ul li {
  margin: 0 6px 20px 0;
  float: left;
  width: 305px;
  height: 190px;
  display: block;
}
img {
  border: 0;
  vertical-align: middle;
}
</style>
